<template>
  <v-app>
    <div class="app">
      <div class="wrapper">
        <div class="wrapper-inner app-layout">
          <PoolBanner />
          <div class="pool-containe">
            <PoolTab :tabList="tabList" @onClick="onTab" />
            <div class="pool-view">
              <PoolData />
            </div>
            <div class="pool-nft-list">
              <PoolList />
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-app>
</template>
<script>
// import Footer from "@/common/components/Footer.vue";
// import Drawer from "@/components/drawer";
import PoolBanner from "./component/poolBanner";
import PoolTab from "./component/poolTab";
import PoolData from "./component/poolData";
import PoolList from "./component/poolList";

export default {
  name: "pool",
  data: () => ({
    drawer: false,
    group: null,
    width: 0,
    height: 0,
    tabList: ["Genesis NFT Pool", "JOJO Bounty Pool", "JOJO Buddy Pool"],
  }),
  components: {
    PoolBanner,
    PoolTab,
    PoolData,
    PoolList,
  },
  watch: {
    group() {
      this.drawer = false;
    },
  },
  created() {},
  mounted() {},
  methods: {
    onTab(idx) {
      console.log(idx);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./../../common/styles/common.scss";

.app {
  min-height: 100vh;
  background: #f7f7f7;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  .wrapper-inner {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }

  .app-layout {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    @media screen and (max-width: 1519px) {
      width: 1092px;
    }
    @media screen and (max-width: 1439px) {
      width: 932px;
    }
    @media screen and (max-width: 1279px) {
      width: calc(100% - 60px);
    }
    @media screen and (max-width: 960px) {
      width: 100vw;
      overflow: hidden;
      padding: 0 15px;
    }
    // @media screen and (min-width: 960px) {
    //   padding: 0 200px;
    // }
    // @media screen and (min-width: 300px) and (max-width: 960px) {
    //   padding: 0 15px;
    // }
  }
  .pool-containe {
    @media screen and (min-width: 960px) {
      margin-top: 48px;
    }
    @media screen and (min-width: 300px) and (max-width: 960px) {
      margin-top: 20px;
    }
  }
  .pool-view {
    margin-top: 36px;
  }
  .pool-nft-list {
    margin-top: 6px;
    padding-bottom: 30px;
  }
}
</style>